import ButtonAgain from "@/components/ButtonAgain";
import NavBarAgain from "@/components/NavBarAgain";
import api from "@/store/api/index.js";
import { setUserInfoAsync } from "@/store/slice/baseSlice.js";
import { ImageUploader, Input, Toast } from "antd-mobile";
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
/* 样式 */
const UpdateBox = styled.div`
  .formBox {
    padding: 30px;

    .item {
      display: flex;
      align-items: center;
      height: 110px;
      line-height: 110px;
      font-size: 28px;

      .label {
        width: 20%;
        text-align: center;
      }

      .input {
        width: 80%;
      }
    }
  }

  .submit {
    display: block;
    margin: 0 auto;
    width: 60%;
    height: 70px;
    font-size: 28px;
  }
`;
export default function Update(props) {
  const { navigate } = props;
  const dispatch = useDispatch();
  const { userInfo } = useSelector((state) => state.base);
  // 定义状态
  const [pic, setpic] = useState([{ url: userInfo.pic }]);
  const [username, setusername] = useState(userInfo.name);
  // 点击提交
  const submit = async () => {
    //  表单验证
    if (pic.length === 0) {
      Toast.show({
        icon: "fail",
        content: "请先上传图片",
      });
      return;
    }
    if (username.trim() === "") {
      Toast.show({
        icon: "fail",
        content: "请先输入账号",
      });
      return;
    }
    // 获取信息，发送请求
    let [{ url }] = pic;
    try {
      let { code } = await api.userUpdate(username.trim(), url);
      if (+code !== 0) {
        Toast.show({
          icon: "fail",
          content: "修改信息失败",
        });
        return;
      }
      Toast.show({
        icon: "success",
        content: "修改信息成功",
      });
      // 同步redux中的内容
      dispatch(setUserInfoAsync());
      navigate(-1);
    } catch (_) {}
  };
  // 图片上传
  const limitImage = (file) => {
    // 限制图片大小
    let limit = 1024 * 1024;
    if (file.size > limit) {
      Toast.show({
        icon: "fail",
        content: "图片须在1MB内",
      });
      return null;
    }
    return file;
  };
  const uploadImage = async (file) => {
    let temp;
    // 上传图片操作
    try {
      let { code, pic } = await api.upload(file);
      if (+code !== 0) {
        Toast.show({
          icon: "fail",
          content: "上传失败",
        });
        return;
      }
      setpic([
        {
          url: pic,
        },
      ]);
      temp = pic;
    } catch (_) {}
    return { url: temp };
  };
  return (
    <UpdateBox>
      <NavBarAgain title='修改信息' />
      <div className='formBox'>
        <div className='item'>
          <div className='label'>头像</div>
          <div className='input'>
            <ImageUploader
              value={pic}
              maxCount={1}
              beforeUpload={limitImage}
              upload={uploadImage}
              onDelete={() => {
                setpic([]);
              }}
            />
          </div>
        </div>
        <div className='item'>
          <div className='label'>姓名</div>
          <div className='input'>
            <Input
              placeholder='请输入账号名称'
              value={username}
              onChange={(val) => {
                setusername(val);
              }}
            />
          </div>
        </div>
        <ButtonAgain color='primary' className='submit' onClick={submit}>
          提交
        </ButtonAgain>
      </div>
    </UpdateBox>
  );
}
